// 配置路由相关信息
import Vue from 'vue'
import Router from 'vue-router'
// 普通加载
// import Home from '../components/home'
// import About from '../components/about'
// import User from '../components/user'

// 路由懒加载,一个懒加载对应一个文件
const Home = () => import('../components/home')
const About = () => import('../components/about')
const User = () => import('../components/user')
const HomeMessage = () => import('../components/homeMessage')
const HomeNews = () => import('../components/homeNews')
const Profile = () => import('../components/profile')

// 1. 通过vue.use(插件)来安装插件
Vue.use(Router)
//2. 创建我们路由对象
//4. 将我们router对象传入到vue实例
const router =  new Router({
  //3. 在这个routers里面嵌套应用关系

  routes: [
    //在这个映射关系里面，一个映射关系，就是一个对象
    {
      path: '',
      // 设置路由的默认值
      redirect: '/home'
      // 设置重定向为home主页
    },
    {
      /*当这里面出现home，我们就回去看是否有home这个标签，然后，就回去调用这个组件*/
      path: '/home',
      component: Home,
      meta: {
        title: "首页"
      },
      children: [
        // 同样的我们也可以对他设置默认值
        {
          path: '',
          redirect: '/home/homeMessage'
        },
        {
          path: '/home/homeMessage',
          component: HomeMessage
        },
        {
          path: '/home/homeNews',
          component: HomeNews
        }
      ]
    },
    {
      path: '/about',
      component: About,
      meta: {
        title: "关于"
      }
    },
    {
      // 用于动态获取url
      path: '/user/:userId',
      component: User,
      meta: {
        title: "用户"
      }
    },
    {
      path: '/profile',
      component: Profile,
      meta: {
        title: "档案"
      }
    }
  ],
  mode: 'history',
  // 因为默认时哈希模式，我们为了美观（url里没有那个#，可以使用html5的history）
})
router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title
  next()
})

export default router
